<template>
    <div class="popLog" :style="`top:${system.clientY - 130}px`">
        <span class="title show">你确定要创建新对话？</span>
        <div class="btnpage">
            <span class="cancel flexC" @click="cancelDelate">取消</span>
            <span class="define flexC" @click="definelDelate">确定</span>
        </div>
    </div>
    </template>
    
    <script setup lang='ts'>
        import { useSystemStore } from "@/store/modules/system";
        const system = useSystemStore();
        const emit = defineEmits(['getSearch']);
        const cancelDelate = ()=>{
            emit('cancelDelate', true)
        }
        const definelDelate = ()=>{
            emit('definelDelate', true)
        }
    </script>
    <style lang="scss" scoped>
    .popLog{
        position:absolute;
        width:220px;
        background:#fff;
        border-radius:10px;
        box-shadow:0 0 7px rgba(166,182,229,.6);
        padding:10px 20px;
        right:0;
        top:-110px;
        z-index:999;
        font-size:14px;
        .title{
            color:#1b56b6;
            line-height:30px;
            text-align:center;
            white-space: nowrap;
        }
        .btnpage{
            width:100%;
            display:flex;
            justify-content:space-between;
            padding:10px 0;
            .cancel{
                border:solid 1px #afb2c5;
                color:#afb2c5;
                height:28px;
                border-radius:5px;
                width:80px;
                cursor:pointer;
            }
            .define{
                color:#fff;
                height:28px;
                border-radius:5px;
                background: #2379ff;
                width:80px;
                cursor:pointer;
            }
        }
    }
    @media screen and (max-width: 768px) {
        .dialog{
            width:230px;
        }
    }
    </style>